/* 
* By default, 
* - in M, L ans XL sizes the Form's labels take 4 cells out 12 of the whole width, e.g 4:8:0
* - in S size, it  the Form's labels take the whole width 12/12 cells, e.g the label and the input are displayed vertically.
*
* The ratio can be changed via the labelSpan and the emptySpan properties.
*/

@container (max-width: 600px) {
	.ui5-form-item,
	.ui5-form-group {
		--ui5-form-item-layout: var(--ui5-form-item-layout-S);
	}

	:host([label-span-s="12"]) .ui5-form-item,
	:host([label-span-s="12"]) .ui5-form-group {
		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
	}
}

@container (width > 600px) and (width <= 1024px) {
	.ui5-form-item,
	.ui5-form-group {
		--ui5-form-item-layout: var(--ui5-form-item-layout-M);
	}

	:host([label-span-m="12"]) .ui5-form-item,
	:host([label-span-m="12"]) .ui5-form-group {
		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
	}
}

@container (width > 1024px) and (width <= 1440px) {
	.ui5-form-item,
	.ui5-form-group {
		--ui5-form-item-layout: var(--ui5-form-item-layout-L);
	}

	:host([label-span-l="12"]) .ui5-form-item,
	:host([label-span-l="12"]) .ui5-form-group {
		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
	}
}

@container (min-width: 1441px) {
	.ui5-form-item,
	.ui5-form-group {
		--ui5-form-item-layout: var(--ui5-form-item-layout-XL);
	}

	:host([label-span-xl="12"]) .ui5-form-item,
	:host([label-span-xl="12"]) .ui5-form-group {
		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
	}
}
